<template>
  <el-table :data="list" style="width: 100%;padding-top: 15px;">
    <el-table-column label="OrderID" min-width="200">
      <template slot-scope="{ row }">
        {{ row.orderId | orderNoFilter }}
      </template>
    </el-table-column>
    <el-table-column label="Price" width="195" align="center">
      <template slot-scope="{ row }">
        ¥{{ row.price | toThousandFilter }}
      </template>
    </el-table-column>
    <el-table-column label="Status" width="100" align="center">
      <template slot-scope="{ row }">
        <el-tag :type="row.status | transactionStatusFilter">
          {{ row.status }}
        </el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getTransactionsTableList } from "@/api/dashboard";
import { ITransactionData } from "@/api/types";

@Component({
  name: "TransactionTable",
  filters: {
    transactionStatusFilter: (status: string) => {
      const statusMap: { [key: string]: string } = {
        success: "success",
        pending: "danger",
      };
      return statusMap[status];
    },
    orderNoFilter: (str: string) => str.substring(0, 30),
    // 转换 Input 10000 => Output "10,000"
    toThousandFilter: (num: number) => {
      return (+num || 0)
        .toString()
        .replace(/^-?\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ","));
    },
  },
})
export default class extends Vue {
  private list: ITransactionData[] = [];

  created() {
    this.fetchData();
  }

  private async fetchData() {
    // todo 需要写一个 api，现在是mock数据
    // const { data } = await getTransactionsTableList({ /* Your params here */ });
    // this.list = data.items.slice(0, 8);
    this.list = [
      {
        orderId: "df8215bb-72a7-4e2a-9729-38b6063064fe",
        price: 12278.24,
        status: "pending",
        timestamp: 1608172959415,
        username: "Roberta Powlowski",
      },
      {
        orderId: "3698b4f7-1d8e-4dfb-8c0c-93ab786a5c91",
        price: 8529.16,
        status: "success",
        timestamp: 1596052832022,
        username: "Mrs. Bertha Huel",
      },
      {
        orderId: "bba4c7c1-0311-455d-9419-02dbc0183f49",
        price: 6226.53,
        status: "success",
        timestamp: 1616234729224,
        username: "Holly Torphy",
      },
      {
        orderId: "277bfeed-6560-4267-ba61-4b35ad153408",
        price: 11296.11,
        status: "success",
        timestamp: 1618121790119,
        username: "Mrs. Leona Gleason",
      },
      {
        orderId: "810e6800-7346-449b-ba5d-dba941fd5a55",
        price: 12601.72,
        status: "pending",
        timestamp: 1619564714081,
        username: "Madeline Runte",
      },
      {
        orderId: "1d7d5a03-a38a-4a04-b9a1-528328d44bae",
        price: 14722.48,
        status: "pending",
        timestamp: 1602977158992,
        username: "Christina Howe",
      },
      {
        orderId: "6f441fae-32cf-48c7-b4c5-cb5f06dd2ae5",
        price: 1434.44,
        status: "pending",
        timestamp: 1607987108965,
        username: "Darren Ziemann",
      },
      {
        orderId: "ca998dcf-175a-4d7d-b361-3630f4c39866",
        price: 13145.54,
        status: "pending",
        timestamp: 1600883834139,
        username: "Tabitha Satterfield",
      },
    ];
  }
}
</script>
